<template>
  <div class="box">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="user">
        <el-input type="text" v-model="ruleForm.user" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>
      <!-- <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
      </el-form-item> -->
      <!-- <el-form-item label="年龄" prop="age">
        <el-input v-model.number="ruleForm.age"></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置为初始值</el-button>
        <!-- <router-link :to="{ name: 'home' }"> -->
        <!-- <button>秘密按钮</button> -->
        <!-- </router-link> -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    // var checkAge = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error('年龄不能为空'));
    //   }
    //   setTimeout(() => {
    //     if (!Number.isInteger(value)) {
    //       callback(new Error('请输入数字值'));
    //     } else {
    //       if (value < 18) {
    //         callback(new Error('必须年满18岁'));
    //       } else {
    //         callback();
    //       }
    //     }
    //   }, 1000);
    // };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    var validateUser = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        user: 'admin',
        pass: '123456',
      },
      rules: {
        user: [
          {
            validator: validateUser, trigger: 'blur'
          }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],

        // age: [
        //   { validator: checkAge, trigger: 'blur' }
        // ]
      }
    };
  },
  methods: {
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        // 验证
        const verify = this.verifyUserPass();
        // console.log(this.ruleForm);
        if (valid && verify) {
          // 登陆成功
          sessionStorage.setItem('cms_token', '1234567890');
          this.$router.push('home');
        } else {
          alert('请检查用户名和密码!!');
          return false;
        }
      });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 验证账号密码
    verifyUserPass() {
      if (this.ruleForm.user === 'admin' && this.ruleForm.pass === '123456') {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 300px;
  margin-top: 150px;
  padding: 50px;
  border: 3px solid #ccc;
  border-radius: 5%;
  background-color: #d3dce6;

}
</style>
